<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Chess.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>AI Chess GM</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="chess/chess.nocache.js"></script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-31346942-2']);
		_gaq.push(['_trackPageview']);

		(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    
	<table height="100%">
		<tr style="vertical-align: top" height="100%">
			<td>
    			<div style="width: 100%;" id="ChessContainer"></div>
    		</td>
			<td style="padding-left: 15px;">
				<table height="98%" style="border-spacing: 0px;">
					<tr height="12%" style="vertical-align: top">
						<td>
							<table id="BlackDisplay" width="290" height="96%" cellpadding="0" cellspacing="0" border="0" class="playerdisplayoff">
								<tbody><tr>
									<td width="14"><img src="gfx/roundedcorner_tl.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-left"></td>
									<td width="262"></td>
									<td width="14"><img src="gfx/roundedcorner_tr.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-right"></td>
								</tr>
								<tr>
									<td></td>
									<td align="center" height="100%">
										<table width="100%" height="100%">
											<tr>
												<td style="font-size: 14px;"><b>engine</b></td>
												<td style="font-size: 14px;">(1500)</td>
												<td align="right" rowspan="3" style="font-size: 20px; font-weight: bold;">00:00</td>
											</tr>
											<tr height="100%">
												<td colspan="2"><img src="gfx/Perpetuum1.png" style="height: 60px;"/></td>
											</tr>
										</table>
									</td>
									<td></td>
								</tr>
								<tr height="14">
									<td><img src="gfx/roundedcorner_bl.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-left"></td>
									<td/>
									<td><img src="gfx/roundedcorner_br.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-right"></td>
								</tr>
							</tbody></table>
    					</td>
    				</tr>
    				<tr height="76%" style="padding-bottom: 10px;">
    					<td>
    						<table width="290" height="96%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f1df;" class="borderless">
								<tbody><tr height="14">
									<td width="14"><img src="gfx/roundedcorner_tl.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-left"></td>
									<td width="262"></td>
									<td width="14"><img src="gfx/roundedcorner_tr.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-right"></td>
								</tr>
								<tr valign="top">
									<td></td>
									<td align="center" height="100%">
										<table width="100%" height="100%">
											<tr valign="top">
												<td style="font-size: 20px; font-weight: bold;">game</td>
											</tr>
											<tr valign="top" height="100%">
												<td><div style="width: 100%; height: 100%; overflow:scroll;" id="GameHistoryContainer"></div></td>
											</tr>
										</table>
									</td>
									<td></td>
								</tr>
								<tr height="14">
									<td><img src="gfx/roundedcorner_bl.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-left"></td>
									<td/>
									<td><img src="gfx/roundedcorner_br.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-right"></td>
								</tr>
							</tbody></table>  						
    					</td>
    				</tr>
    				<tr height="12%" style="vertical-align: top">
						<td>
							<table id="WhiteDisplay" width="290" height="96%" cellpadding="0" cellspacing="0" border="0" class="playerdisplayoff">
								<tbody><tr>
									<td width="14"><img src="gfx/roundedcorner_tl.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-left"></td>
									<td width="262"></td>
									<td width="14"><img src="gfx/roundedcorner_tr.gif" width="14" height="14" border="0" alt="Rounded Corner: Top-right"></td>
								</tr>
								<tr>
									<td></td>
									<td align="center" height="100%">
										<table width="100%" height="100%">
											<tr>
												<td style="font-size: 14px;"><b>human<b></td>
												<td style="font-size: 14px;">(1500)</td>
												<td align="right" rowspan="3" style="font-size: 20px; font-weight: bold;">00:00</td>
											</tr>
											<tr height="100%">
												<td colspan="2"><img src="gfx/HumanPlayerx60.png" style="height: 60px;"/></td>
											</tr>
										</table>
									</td>
									<td></td>
								</tr>
								<tr height="14">
									<td><img src="gfx/roundedcorner_bl.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-left"></td>
									<td/>
									<td><img src="gfx/roundedcorner_br.gif" width="14" height="14" border="0" alt="Rounded Corner: Bottom-right"></td>
								</tr>
							</tbody></table>
    					</td>
    				</tr>
    			</table>
    		</td>
		</tr>
    </table>
  </body>
</html>
